<!--
 * @Author: TANGB02 13233582+Ace-Tang@user.noreply.gitee.com
 * @Date: 2024-02-02 18:26:49
 * @LastEditors: TANGB02 13233582+Ace-Tang@user.noreply.gitee.com
 * @LastEditTime: 2024-03-27 16:09:43
 * @FilePath: \ycq\ycq\ycq1.0\src\pages\personal\personalDetails.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="wrap-details">
    <!-- 面包屑 -->
    <a-breadcrumb style="margin: 16px" separator=">">
      <a-breadcrumb-item
        v-for="(item, index) in $route.matched"
        :key="index"
        :to="{ path: item.path }"
        style="cursor: pointer"
      >
        {{ item.meta.title }}
      </a-breadcrumb-item>
    </a-breadcrumb>
    <div class="perDetalis">
      <div class="hImg">
        <div class="headerPhoto">
          <img
            :src="`http://i79768a535.zicp.fun:23570/common/download?name=${fileName}`"
            alt=""
          />
          <div class="updata" ref="updata" @click="handleUpdata">
            <CameraOutlined
              style="
                font-size: 40px;
                color: #ffffff;
                position: relative;
                right: 10px;
              "
            />
          </div>
          <!-- 上传照片 -->
          <a-modal
            v-model:open="open"
            title="上传头像"
            @ok="handleOk"
            cancelText="取消"
            okText="确定"
          >
            <a-upload-dragger
              v-model:fileList="fileList"
              name="file"
              :multiple="false"
              :before-upload="beforeUpload"
              @change="handleChange"
              @drop="handleDrop"
              :customRequest="customRequest"
              :maxCount="1"
            >
              <p class="ant-upload-drag-icon">
                <inbox-outlined></inbox-outlined>
              </p>
              <p><UploadOutlined style="font-size: 40px" /></p>
              <p class="ant-upload-text">点击或拖动图片至此处</p>
              <p class="ant-upload-hint">
                图片仅支持png/jpg格式；大小不超过2MB
              </p>
            </a-upload-dragger>
          </a-modal>
        </div>

        <span>{{ myName }}</span>
      </div>
      <div class="baseDetails">
        <div class="form-title">基本信息</div>
        <a-form
          :colon="false"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          layout="horizontal"
          name="baseDetails"
          style="max-width: 600px"
          :model="formState"
          ref="formRef"
          :rules="rules"
          @finish="onFinish"
          @finishFailed="onFinishFailed"
          class="form"
        >
          <a-form-item label="用户呢称" name="userName">
            <a-input
              v-model:value="formState.userName"
              style="margin-left: 20px"
            />
          </a-form-item>

          <a-form-item :label="userID" name="userId">
            <a-input
              v-model:value="formState.userId"
              style="margin-left: 20px; border: none"
              readOnly
            />
          </a-form-item>
          <a-form-item :label="age" name="age">
            <a-input-number
              v-model:value="formState.age"
              style="margin-left: 20px"
            />
          </a-form-item>
          <a-form-item :label="sex">
            <a-radio-group
              v-model:value="formState.sex"
              style="margin-left: 20px"
            >
              <a-radio :value="1" style="margin-right: 20px">男</a-radio>
              <a-radio :value="0">女</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
            <a-button
              html-type="submit"
              style="border-color: #d9d9d9; margin-left: 40px; width: 200px"
              >确定</a-button
            >
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { CameraOutlined, UploadOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { updataPersonalMsg, getUserById } from "../../service/api";
import { download, upload } from "@/service/api.js";

import LocalCatch from "@/utils/token.js";
const fileList = ref([]); // 上传照片-上传框
const formState = ref({});
const age = ref("年\xa0\xa0\xa0\xa0\xa0\xa0\xa0龄");
const sex = ref("性\xa0\xa0\xa0\xa0\xa0\xa0\xa0别");
const userID = ref("用\xa0\xa0户\xa0\xa0ID");

const fileName = ref("");
const updata = ref(null);
const open = ref(false);
const myName = ref(LocalCatch.getToken("userName"));
const labelCol = {
  style: {
    width: "150px",
  },
};
const wrapperCol = {
  span: 14,
};

// 显示用户名
formState.value.userName = LocalCatch.getToken("userName");
formState.value.userId = parseInt(LocalCatch.getToken("userId"));
// 回显
const reShow = async () => {
  console.log(formState.value.userId);

  const res = await getUserById({ userId: formState.value.userId });
  console.log(res);
  formState.value.userName = res.data.userName;
  formState.value.sex = res.data.sex;
  formState.value.age = res.data.age;
  fileName.value = res.data.headSculpture;
};
reShow();
const onFinish = async (value) => {
  console.log("succee:" + value);

  const res = await updataPersonalMsg({
    ...formState.value,
    userId: parseInt(formState.value.userId),
  });
  if (res.code === 1) {
    LocalCatch.setToken("userName", formState.value.userName);
    myName.value = LocalCatch.getToken("userName");
    reShow();
    message.success("修改成功");
  } else message.error(res.data);
};
const onFinishFailed = (value) => {
  console.log("fiald:" + value);
};
// 上传照片-模态框
const handleUpdata = () => {
  open.value = true;
};

const handleOk = (e) => {
  console.log(e);
  open.value = false;
};

//上传照片-上传框

const handleChange = async (info) => {
  console.log(info);
};
function handleDrop(e) {
  console.log(e);
}

// 头像
const customRequest = async (file) => {
  // file 是上传的文件 其内容会在放在下面截图中
  // 后端需要接受的参数是 formData数据，
  const form = new FormData();
  console.log(file);

  form.append("file", file.file);

  const res = await upload(form);

  if (res.code === 1) {
    // 调用组件内方法, 设置为成功状态
    file.onSuccess(res, "上传成功");
    file.status = "done";

    console.log(res);
    fileName.value = res.data;
    load(fileName.value);
    const result = await updataPersonalMsg({
      ...formState.value,
      headSculpture: fileName.value,
      userId: parseInt(formState.value.userId),
    });
    console.log(result);
  } else {
    file.onError();
    file.status = "error";
  }
};
// 获取可用的url
const load = async (name) => {
  const res = await download({ name });
};
// 限制图片大小/格式
const beforeUpload = (file) => {
  const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";
  if (!isJpgOrPng) {
    message.error("You can only upload JPG file!");
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error("Image must smaller than 2MB!");
  }
  return isJpgOrPng && isLt2M;
};
const rules = {
  userName: [{}],
};
</script>
<style scoped>
.wrap-details {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  .perDetalis {
    width: 100%;
    padding-left: 16px;
    display: flex;
    flex-flow: column nowrap;
    .headerPhoto {
      img {
        height: 120px;
        margin-left: 48px;
        border-radius: 50%;
        width: 120px;
      }
      .updata {
        position: absolute;
        display: none;
        height: 120px;
        line-height: 120px;
        width: 120px;
        margin-left: 48px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.5);
        text-align: center;
        top: 74px;
        cursor: pointer;
      }
    }
    .headerPhoto:hover .updata {
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      align-items: center;
    }
    .hImg {
      width: 100%;
      height: 160px;
      display: flex;
      flex-flow: row nowrap;
      align-items: center;

      span {
        color: #423834;
        font-weight: 500;
        line-height: 24px;
        font-size: 24px;
        margin-left: 20px;
      }
    }
    .baseDetails {
      width: 100%;
      margin-top: 20px;
      padding-top: 10px;
      .form-title {
        color: #423834;
        height: 20px;
        line-height: 20px;
        font-size: 20px;
        margin-bottom: 20px;
        position: relative;
        left: 70px;
      }
    }
  }
}

.breadcrumb {
  margin: 16px;
}
</style>
